<template>
  <div>

    <template v-if="showDetailPage">
      <detail-page ref="refDetail" :page-show.sync="showDetailPage" :detail-data="activeRowData" />
    </template>
    <div v-show="!showDetailPage">
      <table-box
        ref="refPositionTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :off-set="-10"
        @btnOperate="btnOperate"
      >
        <el-table-column slot="before" fixed="left" label="序号" type="index" />
      </table-box>
      <edit-form v-if="showEdit" ref="formDlg" :visible.sync="showEdit" :detail-data="activeRowData" @success="refreshTable" />
    </div>
  </div>
</template>

<script>
import { parseTime, createDownload } from '@/utils'
import DetailPage from './Detail'
import EditForm from './component/EditForm'
import { deletDemoData, exportDemoData } from '@/api/demo'
// import ImgUploader from '../../components/imgUploader/ImgUploader.vue'

export default {
  name: 'DemoList',
  components: { DetailPage, EditForm },
  data() {
    return {
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `https://qup2dev.quanyou.com.cn/ucenter/api/v2/position/page`,
        hideFuncBar: false,
        pageSize: 20,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'positionCode',
            label: '职务编码',
            minWidth: 130,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'positionName',
            label: '职务名称',
            minWidth: 130
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 130,
            type: 'hidden'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 130,
            type: 'hidden',
            formatData: ({ createTime }) => {
              return parseTime(createTime)
            }
          },
          {
            prop: 'positionDesc',
            label: '职务描述',
            minWidth: 200,
            type: 'hidden'
          }],
        btnList: !this.isProduction ? [{
          buttonName: '新增',
          optCode: 'add',
          outerFlag: true
        },
        {
          buttonName: '编辑',
          optCode: 'edit',
          outerFlag: true
        },
        {
          buttonName: '删除',
          optCode: 'del',
          outerFlag: true
        },
        {
          buttonName: '导出',
          optCode: 'export',
          outerFlag: true
        },
        {
          buttonName: '明细查询',
          optCode: 'detail',
          outerFlag: false
        }] : null
      },
      activeRowData: '',
      showDetailPage: false,
      showEdit: false
    }
  },
  created() {
    this.demo()
  },
  methods: {
    demo() {
      async function fun0() {
        return {
          a: 1, name: 'xiaowangba', age: 18
        }
      }

      fun0().then(x => { console.log(x) })
    },
    refreshTable(isInit) {
      this.$refs.refPositionTable.initTableData(isInit ? '' : 'onPage')
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', true)) {
            return
          }
          this.handleDelete(this.tableSelected[0].positionId)
          break
        case 'export':
          this.handleExport()
          break
        case 'detail':
          if (!this.singleJudge(this.tableSelected, '明细查询', true)) {
            return
          }
          this.handleDetail(this.tableSelected[0])
          break
        default:
          break
      }
    },
    // 查看详情
    handleDetail(data) {
      this.showDetailPage = true
      this.activeRowData = data
    },
    // 新增/编辑
    handleEdit(data) {
      this.showEdit = true
      if (data && data.positionId) {
        this.activeRowData = data
      } else {
        this.activeRowData = ''
      }
    },
    // 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该职务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口执行删除
        deletDemoData(id).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      }).catch(() => {})
    },
    // 导出
    handleExport() {
      const data = {
        page: 1,
        rows: 10,
        sort: 'createTime',
        order: 'desc',
        pageFlag: true,
        onlyCountFlag: false,
        filtersRaw: [],
        sortersRow: []
      }

      exportDemoData(data).then(res => {
        this.$message.success('导出成功，请等待下载')
        createDownload(res, '导出文件名称')
      })
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
